<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<style type="text/css">
			.mui-search{
				display: block;
				width: 95%;
				margin: 5px auto -8px;
			}
			.mui-content>.mui-table-view:first-child{
				margin-top: 0px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">	
			<div class="mui-input-row mui-search">
			    <input id="keyword" type="search" class="mui-input-clear" placeholder="搜索">
			</div>
			<ul id="list" class="mui-table-view mui-table-view-chevron"></ul>
		</div>
	</body>
	
	<script src="../js/mui.min.js "></script>
	<script src="../js/mui.lazyload.js"></script>
	<script src="../js/mui.lazyload.img.js"></script>
	<script>
		mui.init();
		
		var list = mui("#list")[0];
		var keyword = mui("#keyword")[0];

		/*监听软键盘右下角搜索按键*/
		keyword.addEventListener('keydown',function (e) {
			if(e.keyCode == 13){
		    	requestData();
		    }
		})
		
		/*数据请求*/
		function requestData(){
			var url = "http://s.music.163.com/search/get/";       
	        mui.ajax(url,{
				data: {
	                'type': 1,
	                's': keyword.value,
	                'limit': 10
	            },
				dataType:'json',//服务器返回json格式数据
				type:'post',//HTTP请求类型
				timeout:10000,//超时时间设置为10秒；
				success:function(data){
					// console.log(JSON.stringify(data));
					var songs=data.result.songs;
					var fragment = document.createDocumentFragment();
					var li;
					mui.each(songs,function(index,item){
					    // console.log(JSON.stringify(item.album.picUrl));
					     var id = item.id,
					        name = item.album.name,
					        author = item.artists[0].name,
					    	picUrl = item.album.picUrl,
					    	audio = item.audio;	  
					    	
					    li = document.createElement('li');
						li.className = 'mui-table-view-cell mui-media';
						li.innerHTML = '<a class="mui-navigate-right" id='+ id +' data-audio='+ audio +'>'+
						    				'<img class="mui-media-object mui-pull-left" data-lazyload="'+picUrl+'">'+
						    				'<div class="mui-media-body">'+name+
						    					'<p class="mui-ellipsis">'+author+'</p>'+
						    				'</div>'+
						    			'</a>';
						fragment.appendChild(li);
					})
					
					list.appendChild(fragment)
					
					mui(document).imageLazyload({
						placeholder: '../img/lazyload.gif'
					});
				},
				error:function(xhr,type,errorThrown){
					//异常处理；
					console.log(type);
				}
			});
		}
		
	    //列表点击事件
		mui("#list").on('tap','li a',function(){
			var id = this.getAttribute('id');
			var audio = this.getAttribute('data-audio');
			//打开详情页面
			mui.openWindow({
				url:'music.html',
			    id:'music.html',
			    extras:{
			        musicId:id,
			        audioUrl:audio
			    }
			});
		});
	</script>
</html>